<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('create categories') }}
        </h2>
    </x-slot>
<div class="container mx-auto">
        <div class="py-12">
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h1 class="text-lg font-medium mb-4">Create a new category</h1>

                <form method="POST" action="{{ route('categories.store') }}">
                    @csrf

                    <div class="mb-4">
                        <label class="block text-gray-700 font-medium mb-2" for="name">
                            Name
                        </label>
                        <input
                            class="border border-gray-400 p-2 rounded-lg w-full @error('name') border-red-500 @enderror"
                            type="text"
                            name="name"
                            id="name"
                            value="{{ old('name') }}"
                            required
                            autocomplete="name"
                            autofocus
                        >
                        @error('name')
                            <p class="text-red-500 text-xs italic">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label class="block text-gray-700 font-medium mb-2" for="parent_id">
                            Parent Category
                        </label>
                        <select
                            class="border border-gray-400 p-2 rounded-lg w-full"
                            name="parent_id"
                            id="parent_id"
                        >
                            <option value="">None</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-gray-700 font-medium mb-2" for="description">
                            description
                        </label>
                        <input
                            class="border border-gray-400 p-2 rounded-lg w-full @error('description') border-red-500 @enderror"
                            type="text"
                            name="description"
                            id="description"
                            value="{{ old('description') }}"
                            required
                            autocomplete="description"
                            autofocus
                        >
                        @error('description')
                        <p class="text-red-500 text-xs italic">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-gray-700 font-medium mb-5" for="slug">
                            slug
                        </label>
                        <input
                            class="border border-gray-400 p-2 rounded-lg w-full @error('slug') border-red-500 @enderror"
                            type="text"
                            name="slug"
                            id="slug"
                            value="{{ old('slug') }}"
                            required
                            autocomplete="slug"
                            autofocus
                        >
                        @error('slug')
                        <p class="text-red-500 text-xs italic">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="text-right">
                        <button class="bg-blue-500 py-2 px-4 rounded-lg hover:bg-blue-600 text-gray-700 border border-gray-300" type="submit">
                            Create Category
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>
